<template>
  <PageWrapper dense>
    <div class="flex justify-center">
      <RadioGroup v-model:value="state.value">
        <RadioButton value="a">销售订单</RadioButton>
        <RadioButton value="b">销售退款单</RadioButton>
        <RadioButton value="c">关注产品</RadioButton>
      </RadioGroup>
    </div>
    <BasicTable @register="registerTable">
      <template #extra>
        <Row>
          <Col :span="6">
            <div class="p-2 flex flex-col items-center">
              <span class="font-size-16px font-600 mb-8px">销售总额</span>
              <CountTo prefix="¥" :startVal="0" :endVal="0" :decimals="2" />
            </div>
          </Col>
          <Col :span="6">
            <div class="p-2 flex flex-col items-center">
              <span class="font-size-16px font-600 mb-8px">已回款金额</span>
              <CountTo prefix="¥" :startVal="0" :endVal="0" :decimals="2" />
            </div>
          </Col>
          <Col :span="6">
            <div class="p-2 flex flex-col items-center">
              <span class="font-size-16px font-600 mb-8px">待回款金额</span>
              <CountTo prefix="¥" :startVal="0" :endVal="0" :decimals="2" />
            </div>
          </Col>
          <Col :span="6">
            <div class="p-2 flex flex-col items-center">
              <span class="font-size-16px font-600 mb-8px">回款比例</span>
              <CountTo suffix="%" :startVal="0" :endVal="0" :decimals="2" />
            </div>
          </Col>
        </Row>
      </template>
      <template #toolbar>
        <Button type="primary">新增销售订单</Button>
      </template>
    </BasicTable>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import { BasicTable, useTable } from '@/components/Table';
  import { listCustomer } from '@/api/customer';
  import { formSchems, columns } from './relevantInformation.data';
  import { RadioGroup, RadioButton, Button, Row, Col } from 'ant-design-vue';
  import { CountTo } from '@/components/CountTo';
  defineOptions({ name: 'RelevantInformation' });
  const [registerTable, { reload }] = useTable({
    title: '销售订单',
    api: listCustomer,
    showIndexColumn: true,
    rowKey: 'id',
    useSearchForm: true,
    formConfig: {
      schemas: formSchems,
      labelWidth: 80,
      baseColProps: {
        span: 8,
      },
    },
    columns: columns,
  });
  const state = reactive({
    value: 'a',
  });
  // reload();
</script>

<style scoped></style>
